<template>
	<view>
		<!-- 头部区域 -->
		<view class="tn-head">
			<view class="tn-head-null">
			</view>

			<!-- 小程序管理名称区域 -->
			<view class="tn-head-name-head">
				<view class="tn-head-name">
					星火小助手麦序机器人管理
				</view>
			</view>

			<!-- 用户搜索区域 -->
			<view class="tn-head-search-head">
				<view class="tn-head-search-search">
					<u-search shape="square" placeholder="搜索" :showAction="false" @change="filterData"
						v-model="sercharValue"></u-search>
				</view>
				<view class="tn-head-search-add" @click="openCommand()">
					<!-- 		<image class="tn-head-search-add-picture" src="/static/images/wechart/Union.png"></image> -->
					<u-icon name="plus" color="#FA6868" size="14.5"></u-icon>
				</view>
				<view class="tn-head-search-ling" @click="openKefu()">
					<u-icon name="kefu-ermai" color="#FFFFFF" size="20"></u-icon>
				</view>
			</view>
		</view>


		<!-- 列表总数区域 -->
		<view v-if="registerflag" class="tn-total">
			<view class="tn-total-info">
				共 {{userRoomListData.length}} 丨 下拉刷新
			</view>
		</view>


		<!-- 中间区域 -->


		<!-- 页面内容 -->



		<!-- 一键登录 区域-->
		<view v-if="!registerflag " class="tn-middle-login">
			<!-- 纸盒子 -->
			<view class="tn-middle-login-pictrue">

			</view>

			<!--标题 -->
			<view class="tn-middle-login-info">
				登录后可查看并管理机器人
			</view>

			<!-- 登录 -->
			<view class="tn-middle-login-login" @click="userRegister">
				<view class="tn-middle-login-text"> 微信一键登录</view>
			</view>

		</view>



		<!-- 转发口令 区域-->
		<view v-if="datanullflag" class="tn-middle-password">

			<!-- 纸盒子 -->
			<view class="tn-middle-login-pictrue">

			</view>

			<!-- 			<view class="tn-middle-password-info">
				发送下方专属口令到您管理的群聊中即可添加机器人
			</view> -->
			<!-- 
			<view class="tn-middle-password-password" @click="copyUserCommand">
				<view class="tn-middle-password-password-content"> {{command}}</view>

				<image class="tn-middle-password-password-copy " src="/static/images/wechart/Frame.png"></image>
			</view> -->

			<!-- 转发口令 -->
			<!-- 		<view class="tn-middle-login-login" @click="copyUserCommand">
				<view class="tn-middle-login-text"> 转发口令</view>

			</view> -->

		</view>
		<!-- 直播间列表区域 -->
		<view v-if="registerflag" class="" v-for="(userRoom, i) in userRoomListData" :key="i">

			<view class="tn-middle-list" @click="changeRoomInfo(userRoom)">
				<image class="tn-middle-list-picture " :src="getImage(userRoom)"></image>
				<view class="tn-middle-list-info">
					<view class="tn-middle-list-info-name">
						{{userRoom.roomName}}
					</view>
					<view class="tn-middle-list-info-tag">
						<image class="tn-middle-list-info-tag-first" src="/static/images/wechart/usericon.png"></image>
						<view class="tn-middle-list-info-tag-second">
							{{userRoom.robotName}}
						</view>
						<image class="tn-middle-list-info-tag-third" src="/static/images/wechart/time.png"></image>
						<view class="tn-middle-list-info-tag-four">
							{{formatDate(userRoom.endTime)}} 到期
						</view>
					</view>
				</view>
			</view>

		</view>


		<u-popup :show="kefuFlag" :round="10" mode="center" @close="kefuFlag = false" @open="open"
			:safeAreaInsetBottom="false">
			<view class="tn-popup-kefu">
				<view class="tn-popup-kefu-first">
					<view class="tn-popup-kefu-first-text">复制微信号添加客服</view>
				</view>
				<view class="tn-popup-kefu-second">
					<view class="tn-popup-kefu-second-line" @click="copyKufuCommand('xzskfcc')">
						<view class="tn-popup-kefu-second-line-name">商务合作</view>
						<view class="tn-popup-kefu-second-line-id">Richhh6868668</view>
						<image class="tn-popup-kefu-second-line-copy " src="/static/images/wechart/Frame.png"></image>
					</view>
					<view class="tn-popup-kefu-second-line" @click="copyKufuCommand('zyzq12388')">
						<view class="tn-popup-kefu-second-line-name">客服左一</view>
						<view class="tn-popup-kefu-second-line-id">zyzq12388</view>
						<image class="tn-popup-kefu-second-line-copy " src="/static/images/wechart/Frame.png"></image>
					</view>
					<view class="tn-popup-kefu-second-line" @click="copyKufuCommand('Wang6139377')">
						<view class="tn-popup-kefu-second-line-name">客服小博</view>
						<view class="tn-popup-kefu-second-line-id">xb134031</view>
						<image class="tn-popup-kefu-second-line-copy " src="/static/images/wechart/Frame.png"></image>
					</view>
					<view class="tn-popup-kefu-second-line" @click="copyKufuCommand('Wang6139377')">
						<view class="tn-popup-kefu-second-line-name">客服芝士</view>
						<view class="tn-popup-kefu-second-line-id">Wang6139377</view>
						<image class="tn-popup-kefu-second-line-copy " src="/static/images/wechart/Frame.png"></image>
					</view>
					<view class="tn-popup-kefu-second-line" @click="copyKufuCommand('Wang6139377')">
						<view class="tn-popup-kefu-second-line-name">客服CC</view>
						<view class="tn-popup-kefu-second-line-id">xzskfcc</view>
						<image class="tn-popup-kefu-second-line-copy " src="/static/images/wechart/Frame.png"></image>
					</view>
				</view>
				<view class="tn-popup-kefu-third" @click="kefuFlag = false">
					<view class="tn-popup-kefu-third-text">关闭弹窗</view>
				</view>
			</view>
		</u-popup>



		<u-popup :show="false" :round="10" mode="bottom" @close="closepopup" @open="open" :safeAreaInsetBottom="false">


			<!-- <u-popup :show="commandpopupflag" :round="10" mode="bottom" @close="closepopup" @open="open"
				:safeAreaInsetBottom="false"> -->

			<view class="tn-popup-robot">

				<view class="tn-popup-robot-first">
					<view class="tn-popup-robot-first-text">转发口令添加机器人</view>
				</view>

				<view class="tn-popup-robot-second">
					<view class="tn-popup-robot-second-password" @click="copyUserCommand">
						<view class="tn-popup-robot-second-password-password">
							{{command}}
						</view>
						<image class="tn-popup-robot-second-password-copy" src="/static/images/wechart/Frame.png">
						</image>
					</view>
					<view class="tn-popup-robot-second-info">
						发送该专属口令发送到您管理的群聊中即可
					</view>
				</view>

				<view class="tn-popup-robot-third">
					<view class="tn-popup-robot-third-cancel" @click="closepopup">
						<view class="tn-popup-robot-third-cancel-text">
							取消
						</view>
					</view>

					<view class="tn-popup-robot-third-confirm" @click="copyUserCommand">
						<view class="tn-popup-robot-third-confirm-text">
							<!-- 		<button class="tn-popup-robot-third-confirm" open-type="share">转发口令</button> -->
							转发口令
						</view>
					</view>

				</view>
			</view>
		</u-popup>



		<u-popup :show="false" mode="bottom">
			<view class="tn-content-update-popup">

				<view class="tn-content-update-popup-head">
					<view class="tn-content-update-popup-head-text">部位后任务排
					</view>
				</view>

				<view class="tn-content-update-popup-input">

					<u--input placeholder="请输入内容" border="surround" v-model="orvalue" @change="change"></u--input>
				</view>

				<view class="tn-content-update-popup-result">
					<view class="tn-content-update-popup-result-cancel">
						<view class="tn-content-update-popup-result-cancel-text">取消</view>
					</view>

					<view class="tn-content-update-popup-result-confirm">
						<view class="tn-content-update-popup-result-confirm-text">确定</view>
					</view>
				</view>

			</view>
		</u-popup>


		<u-popup :show="false" mode="bottom">
			<view class="tn-content-update-popup">

				<view class="tn-content-update-popup-head">
					<view class="tn-content-update-popup-head-text">部位后任务排
					</view>
				</view>

				<view class="tn-content-update-popup-input">
					<!-- 					<u-number-box v-model="orvalue" @change="valChange"></u-number-box>
					<slider value="orvalue" @change="sliderChange" step="1" showValue="true" />

					<!-- 					<u-slider v-model="orvalue" showValue="true"></u-slider> -->
				</view>

				<view class="tn-content-update-popup-result">
					<view class="tn-content-update-popup-result-cancel">
						<view class="tn-content-update-popup-result-cancel-text">取消</view>
					</view>

					<view class="tn-content-update-popup-result-confirm">
						<view class="tn-content-update-popup-result-confirm-text">确定</view>
					</view>
				</view>

			</view>
		</u-popup>



	</view>
</template>

<script>
	import {
		welogin,
		userRoomList
	} from '@/api/login';
	import dayjs from "@/handleScript/dayjs.js";
	export default {

		onShareAppMessage: function(res) {

			if (res.from === 'button') { // 来自页面内分享按钮
				return {
					title: '已添加机器人至后台',
					path: '/pages/welogin',
					content: "绑定" + this.command
				};
			}

			return {
				title: '已添加机器人至后台',
				path: '/pages/welogin',
				imageUrl: '/static/images/wechart/export.png'
			};
		},

		data() {
			return {
				//判断是否已经注册
				registerflag: false,
				datanullflag: false,
				commandpopupflag: false,
				command: "",
				sercharValue: "",
				userRoomListData: [],
				sourceUserRoomListData: [],
				kefuFlag: false,
				timer: null,
				orvalue: 34
			}
		},

		onLoad() {
			const openid = uni.getStorageSync('user_openid');
			if (openid) {
				this.registerflag = true
				this.getUserRoomList();
				this.command = uni.getStorageSync('user_command')
			}
		},

		onPullDownRefresh() {
			uni.showLoading({
				title: '下拉刷新中'
			})
			this.getUserRoomList();
			// 模拟异步请求数据
			setTimeout(() => {
				// 这里可以编写刷新数据的逻辑，比如重新请求接口获取最新数据
				console.log('下拉刷新完成');
				// 停止下拉刷新动画
				uni.hideLoading()
				uni.stopPullDownRefresh();
			}, 1000);
		},



		onUnload() {
			// 页面卸载时清除定时器
			if (this.timer) {
				clearTimeout(this.timer);

			}
		},
		methods: {

			async userRegister() {
				await uni.login({
					provider: 'weixin', //使用微信登录
					success: function(loginRes) {
						console.log(loginRes);

						welogin(loginRes.code).then(res => {

							if (res.code == 200) {
								console.log(res.data)
								uni.setStorageSync('user_openid', res.data.openid)
								uni.setStorageSync('user_command', res.data.passwordCommand)
								this.registerflag = true;
								uni.setStorageSync('registerflag', true)

							}

						})
					}
				});

				uni.showLoading({
					title: '登录中'
				})

				setTimeout(() => {
					this.registerflag = uni.getStorageInfoSync('registerflag')
					if (this.registerflag) {
						uni.hideLoading()
						this.getUserRoomList();
						this.command = uni.getStorageSync('user_command')
					}

				}, 1500);


			},

			filterData() {
				if (this.sercharValue.length == 0) {
					this.userRoomListData = this.sourceUserRoomListData
				} else {
					this.userRoomListData = this.userRoomListData.filter(userRoom => userRoom.roomName != null).filter(
						userRoom => userRoom.roomName.includes(this.sercharValue)
					)
				}
			},

			getImage(userRoom) {
				if (userRoom.imageUrl == null || userRoom.imageUrl.length == 0) {
					return '/static/images/wechart/roomname.jpg'
				}
				// return '/static/images/wechart/imagePi.png'
				return userRoom.imageUrl
			},

			refresherrefresh() {
				// 模拟数据加载，实际应用中应该从服务器获取数据
				this.getUserRoomList();
				console.log('-----------')
				setTimeout(() => {
					console.log('-----------5667')

					this.$refs.scrollViewRef.finishPullToRefresh();
					// 停止下拉刷新动画
				}, 1000); // 假设加载需要1秒时间
			},


			async getUserRoomList() {
				await userRoomList(uni.getStorageSync('user_openid')).then(res => {
					this.userRoomListData = res.data
					this.sourceUserRoomListData = res.data
					if (this.userRoomListData == null || this.userRoomListData.length == 0) {
						this.datanullflag = true
					} else {
						this.datanullflag = false
					}
				})

			},


			closepopup() {
				this.commandpopupflag = false;
			},

			openCommand() {
				//this.commandpopupflag = true

				this.copyUserCommand();

			},
			openKefu() {
				this.kefuFlag = true;
			},

			// 格式化日期的方法，
			formatDate(dateTime) {
				return dayjs(dateTime).format("YYYY-MM-DD HH:mm:ss");
			},

			copyUserCommand() {
				uni.setClipboardData({
					data: "绑定" + this.command,
					success: () => {
						//this.$toast("成功! ");
					},
					fail(err) {
						//this.$toast("失败！");
					},
				});
			},

			copyKufuCommand(wxid) {
				uni.setClipboardData({
					data: wxid,
					success: () => {
						this.$toast("复制成功！");
					},
					fail(err) {
						this.$toast("复制失败！");
					},
				});
			},


			refreshPage() {
				uni.redirectTo({
					url: '/pages/welogin' // 这里的路径应该和当前页面的路径相同
				});
			},

			changeRoomInfo(userRoom) {
				this.$tab.navigateTo(`/pages/roomInfo?roomId=${userRoom.roomId}&roomName=${userRoom.roomName}`)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.tn-head {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;

		border-radius: 0px 0px 20rpx 20rpx;
		background-color: #FA6868;
		z-index: 1000;

	}

	.tn-head-null {
		display: flex;
		width: 100%;
		height: 88rpx;
		flex-direction: column;
		align-items: flex-start;
		flex-shrink: 0;
	}

	.tn-head-name-head {
		display: flex;
		justify-content: space-between;
		align-items: center;
		align-self: stretch;
		padding-left: 40rpx;
		//padding-bottom: 24.5rpx;
		width: 100%;
		height: 88rpx;
	}

	.tn-head-name {
		color: #FFF;
		font-family: "PingFang SC";
		font-size: 28rpx;
		font-style: normal;
		font-weight: 500;
		line-height: normal;
		height: 39rpx;
		// padding-left: 40rpx;
		gap: 16rpx;

	}

	.tn-head-search-head {

		display: flex;
		width: 750rpx;
		padding: 20rpx 40rpx 40rpx 40rpx;
		align-items: center;
		gap: 20rpx;

	}

	.tn-head-search-search {
		height: 64rpx;
		flex: 1 0 0;
	}

	.tn-head-search-add {
		border-radius: 8rpx;
		background: #FFF;
		display: flex;
		width: 64rpx;
		height: 64rpx;
		padding: 10rpx 24rpx;
		justify-content: center;
		align-items: center;
		gap: 16rpx;
		flex-shrink: 0;
	}

	.tn-head-search-add-picture {
		width: 29rpx;
		height: 29rpx;
		// flex-shrink: 0;
		// fill: #07C160;
	}


	.tn-head-search-ling {
		width: 40rpx;
		height: 40rpx;
		flex-shrink: 0;
	}


	.tn-total {
		margin-top: 306rpx;
		display: flex;
		padding: 16rpx 20rpx;
		justify-content: center;
		align-items: center;
		gap: 20rpx;
		align-self: stretch;
		border-bottom: 2px solid #E7E6E4;

		.tn-total-info {
			color: #C0C4CC;
			font-family: "PingFang SC";
			font-size: 20rpx;
			font-style: normal;
			font-weight: 400;
			line-height: normal;
		}

	}



	.tn-middle-login {
		margin-top: 600rpx;
		display: flex;
		padding: 0px 80rpx 200rpx 80rpx;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 40rpx;
		align-self: stretch;
	}

	.tn-middle-login-pictrue {
		width: 254rpx;
		height: 204rpx;
		background: url("/static/images/wechart/zhihezi.png") 0px 0px / 100% 100% no-repeat;
	}

	.tn-middle-login-info {
		color: #000;
		text-align: center;
		font-family: "PingFang SC";
		font-size: 28rpx;
		font-style: normal;
		font-weight: 500;
		line-height: normal;
		opacity: 0.9;
		//margin-top: 40rpx;
		//margin-bottom: 40rpx;


	}

	.tn-middle-login-login {
		display: flex;
		height: 74rpx;
		padding: 14rpx 29rpx;
		justify-content: center;
		align-items: center;
		gap: 10rpx;
		align-self: stretch;

		border-radius: 8rpx;
		background: #FA6868;

		.tn-middle-login-text {
			color: #FFF;
			font-family: "PingFang SC";
			font-size: 32rpx;
			font-style: normal;
			font-weight: 500;
			line-height: normal;
		}
	}


	.tn-middle-password {
		margin-top: 300rpx;
		display: flex;
		padding: 0px 80rpx 200rpx 80rpx;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 40rpx;
		align-self: stretch;
	}

	.tn-middle-password-info {
		color: #000;
		text-align: center;
		font-family: "PingFang SC";
		font-size: 28rpx;
		font-style: normal;
		font-weight: 500;
		line-height: normal;
		opacity: 0.9;
		padding-left: 60rpx;
		padding-right: 60rpx;
	}

	.tn-middle-password-password {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 20rpx;
		align-self: stretch;

		.tn-middle-password-password-content {
			color: #FA6868;
			font-family: "PingFang SC";
			font-size: 28rpx;
			font-style: normal;
			font-weight: 500;
			line-height: 44rpx;
			/* 157.143% */
		}

		.tn-middle-password-password-copy {
			width: 32rpx;
			height: 32rpx;
			aspect-ratio: 1/1;
		}
	}


	.tn-popup-kefu {
		display: flex;
		width: 670rpx;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		border-radius: 12rpx;
		background: #FFF;

		.tn-popup-kefu-first {
			display: flex;
			//height: 96rpx;
			padding: 30rpx;
			justify-content: center;
			align-items: center;
			gap: 20rpx;
			align-self: stretch;

			.tn-popup-kefu-first-text {
				color: #000;
				text-align: center;
				font-family: "PingFang SC";
				font-size: 28rpx;
				font-style: normal;
				font-weight: 700;
				line-height: normal;
				opacity: 0.9;
			}

		}

		.tn-popup-kefu-second {
			display: flex;
			padding: 20rpx 80rpx 40rpx 80rpx;
			flex-direction: column;
			// justify-content: center;
			align-items: center;
			gap: 24rpx;
			// align-self: stretch;
			width: 100%;

			.tn-popup-kefu-second-line {
				display: flex;
				justify-content: space-between;
				width: 100%;


				.tn-popup-kefu-second-line-name {
					color: #303133;
					font-family: "PingFang SC";
					font-size: 28rpx;
					font-style: normal;
					font-weight: 400;
					line-height: normal;

				}

				.tn-popup-kefu-second-line-id {
					color: #303133;
					font-family: "PingFang SC";
					font-size: 28rpx;
					font-style: normal;
					font-weight: 500;
					line-height: normal;

				}

				.tn-popup-kefu-second-line-copy {
					width: 32rpx;
					height: 32rpx;

					aspect-ratio: 1/1;
				}

			}




		}

		.tn-popup-kefu-third {
			display: flex;
			height: 100rpx;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			gap: 20rpx;
			align-self: stretch;
			border-top: 2rpx solid #E7E6E4;

			.tn-popup-kefu-third-text {
				color: #FA6868;
				text-align: center;
				font-family: "PingFang SC";
				font-size: 32rpx;
				font-style: normal;
				font-weight: 400;
				line-height: 44rpx;
				/* 137.5% */
			}
		}
	}


	.tn-popup-robot {
		display: flex;
		flex-direction: column;
		width: 100%;

		.tn-popup-robot-first {
			display: flex;
			height: 96rpx;
			padding: 20rpx;
			flex-direction: column;
			align-items: center;
			border-radius: 32rpx 32rpx 0rpx 0rpx;
			background: #FFF;

			.tn-popup-robot-first-text {
				color: #000;
				text-align: center;
				font-family: "PingFang SC";
				font-size: 28rpx;
				font-style: normal;
				font-weight: 600;
				line-height: normal;
				opacity: 0.9;
			}

		}


		.tn-popup-robot-second {
			display: flex;
			padding: 20rpx 40rpx;
			flex-direction: column;
			align-items: center;
			gap: 20rpx;
			align-self: stretch;

			.tn-popup-robot-second-password {
				display: flex;
				height: 64rpx;
				padding: 10rpx 24rpx;
				justify-content: space-around;
				align-items: center;
				align-self: stretch;
				border-radius: 8rpx;
				background: #F3F4F6;

				.tn-popup-robot-second-password-password {
					color: #FA6868;
					font-family: "PingFang SC";
					font-size: 28rpx;
					font-style: normal;
					font-weight: 500;
					line-height: 44rpx;
					/* 157.143% */
				}

				.tn-popup-robot-second-password-copy {
					width: 32rpx;
					height: 32rpx;
					aspect-ratio: 1/1;
				}

			}

			.tn-popup-robot-second-info {

				color: #000;
				text-align: center;
				font-family: "PingFang SC";
				font-size: 24rpx;
				font-style: normal;
				font-weight: 400;
				line-height: normal;
				opacity: 0.9;
			}
		}

		.tn-popup-robot-third {
			display: flex;
			padding: 40rpx;
			align-items: center;
			gap: 24rpx;
			align-self: stretch;

			.tn-popup-robot-third-cancel {
				display: flex;
				height: 74rpx;
				padding: 14rpx 29rpx;
				justify-content: center;
				align-items: center;
				gap: 10rpx;
				flex: 1 0 0;
				border-radius: 8rpx;
				background: #F4F4F5;

				.tn-popup-robot-third-cancel-text {
					color: #303133;
					font-family: "PingFang SC";
					font-size: 32rpx;
					font-style: normal;
					font-weight: 600;
					line-height: normal;
				}
			}

			.tn-popup-robot-third-confirm {

				display: flex;
				height: 74rpx;
				padding: 14rpx 29rpx;
				justify-content: center;
				align-items: center;
				gap: 10rpx;
				flex: 1 0 0;
				border-radius: 8rpx;
				background: #FA6868;

				.tn-popup-robot-third-confirm-text {
					color: #FFF;
					font-family: "PingFang SC";
					font-size: 32rpx;
					font-style: normal;
					font-weight: 600;
					line-height: normal;
				}
			}
		}

	}



	.tn-middle-list {
		display: flex;
		width: 750rpx;
		padding-left: 40rpx;
		align-items: center;
		gap: 24rpx;


		.tn-middle-list-picture {
			width: 82rpx;
			height: 82rpx;
			flex-shrink: 0;
			aspect-ratio: 1/1;
			border-radius: 8rpx;
			border: 2rpx solid rgba(6, 173, 86, 0.30);
			//	background: url("/static/images/wechart/imagePi.png") lightgray -27.333rpx -729.041rpx / 833.333% 1787.037% no-repeat;
		}

		.tn-middle-list-info {
			display: flex;
			flex-direction: column;
			padding: 32rpx 40rpx 32rpx 0rpx;
			justify-content: space-between;
			//align-items: center;
			flex: 1 0 0;
			margin-left: 24rpx;
			border-bottom: 2rpx solid #E7E6E4;

			.tn-middle-list-info-name {
				color: #FA6868;
				font-family: "PingFang SC";
				font-size: 28rpx;
				font-style: normal;
				font-weight: 500;
				line-height: normal;
				align-self: stretch;
			}

			.tn-middle-list-info-tag {
				// display: relative;
				display: flex;
				margin-top: 8rpx;
				align-items: center;

				.tn-middle-list-info-tag-first {
					//display: absolute;
					width: 28rpx;
					height: 28rpx;
					aspect-ratio: 1/1;
					margin-right: 6rpx;
				}

				.tn-middle-list-info-tag-second {
					//display: absolute;
					color: #303133;
					font-family: "PingFang SC";
					font-size: 22rpx;
					font-style: normal;
					font-weight: 400;
					line-height: normal;
					width: 140rpx;
					margin-right: 20rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.tn-middle-list-info-tag-third {
					//display: absolute;
					width: 28rpx;
					height: 28rpx;
					aspect-ratio: 1/1;
					margin-right: 6rpx;
				}

				.tn-middle-list-info-tag-four {
					//display: absolute;
					color: #303133;
					font-family: "PingFang SC";
					font-size: 22rpx;
					font-style: normal;
					font-weight: 400;
					line-height: normal;
				}

			}

		}
	}




	.tn-content-update-popup {
		z-index: 2000;
		display: flex;
		width: 100%;
		flex-direction: column;
		align-items: center;
		border-radius: 32rpx 32rpx 0rpx 0rpx;
		background: #FFF;

		.tn-content-update-popup-head {
			display: flex;
			height: 96rpx;
			padding: 20rpx 0rpx;
			justify-content: center;
			align-items: center;
			gap: 20rpx;
			align-self: stretch;

			.tn-content-update-popup-head-text {
				color: #000;
				text-align: center;
				font-family: "PingFang SC";
				font-size: 28rpx;
				font-style: normal;
				font-weight: 500;
				line-height: normal;
				opacity: 0.9;
			}
		}

		.tn-content-update-popup-input {
			// display: flex;
			width: 670rpx;
			// padding: 10rpx 24rpx;
			// align-items: flex-start;
			// gap: 20rpx;

			// width: 100%;
		}

		.tn-content-update-popup-result {
			display: flex;
			padding: 40rpx;
			align-items: center;
			gap: 24rpx;
			align-self: stretch;

			.tn-content-update-popup-result-cancel {
				display: flex;
				height: 74rpx;
				padding: 14rpx 29rpx;
				justify-content: center;
				align-items: center;
				gap: 10rpx;
				flex: 1 0 0;
				border-radius: 8rpx;
				background: #F4F4F5;

				.tn-content-update-popup-result-cancel-text {
					color: #303133;
					font-family: "PingFang SC";
					font-size: 32rpx;
					font-style: normal;
					font-weight: 500;
					line-height: normal;
				}
			}

			.tn-content-update-popup-result-confirm {
				display: flex;
				height: 74rpx;
				padding: 14rpx 29rpx;
				justify-content: center;
				align-items: center;
				gap: 10rpx;
				flex: 1 0 0;
				border-radius: 8rpx;
				background: #FA6868;

				.tn-content-update-popup-result-confirm-text {
					color: #FFF;
					font-family: "PingFang SC";
					font-size: 32rpx;
					font-style: normal;
					font-weight: 500;
					line-height: normal;
				}
			}
		}
	}
</style>